<template>
<div class="acquisition-interface">
    <el-form ref="form" :inline="true" :model="LandParcelInfo" label-width="140px">
        <el-divider content-position="left">图斑基本信息</el-divider>
        <el-row>
            <el-col :span="18">
                <el-form-item label="图斑ID">
                    <el-input v-model="spotComputedID" :readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="系统命名">
                    <el-input v-model="LandParcelInfo.landName" :readonly="true">
                        <template slot="append">
                            <el-button type="primary" @click="getLandNameAuto">重命名</el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="本地地块/鱼塘编号">
                    <el-input v-model="LandParcelInfo['localId']"></el-input>
                </el-form-item>
                <el-form-item label="土名">
                    <el-input v-model="LandParcelInfo['localName']"></el-input>
                </el-form-item>
                <SelectTown :key="spotComputedID + '-' + townId" :townCode="townId" @on-change="getTownId">
                    选择镇街
                </SelectTown>
                <SelectVillage :key="spotComputedID + '-' + VillageId" :townId="townId" :villageCode="VillageId" @on-change="getVillageId">选择村居
                </SelectVillage>
                <el-form-item label="村小组/经济社">
                    <el-input v-model="LandParcelInfo['villageGroupName']"></el-input>
                </el-form-item>

                <el-form-item label="面积(亩)">
                    <el-input v-model="LandParcelInfo.landProductArea"></el-input>
                </el-form-item>

                <el-form-item label="是否为自留地">
                    <el-radio-group v-model="LandParcelInfo.isPrivatePlot" size="medium">
                        <el-radio-button :label="1">是自留地</el-radio-button>
                        <el-radio-button :label="0">不是自留地</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item v-show="LongitudeAndLatitude.length" label="地块坐标">
                    <el-input v-model="LongitudeAndLatitude" :readonly="true">
                        <template slot="append">
                            <el-button type="primary" @click="location(LongitudeAndLatitude)">定位</el-button>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item label="备注" class="textarea">
                    <el-input type="textarea" style="width: 100%; display: block" v-model="LandParcelInfo.landMemo" placeholder="如有需要可在此处加入备注内容" minlength="0" maxlength="5000" show-word-limit></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="4">
                <el-form-item :key="ossImgList">
                    <Avatar v-if="isShow" :headUrl="ossImgList" class="Avatar" @click="getImgUrl">图片上传</Avatar>
                    <el-image v-else :src="ossImgList" style="width: 230px; height: 230px"></el-image>
                </el-form-item>
            </el-col>
        </el-row>

        <el-divider content-position="left">图斑生产信息</el-divider>

        <el-form-item label="是否大棚">
            <el-radio-group v-model="LandParcelInfo.isLargeGreenhouse" size="medium">
                <el-radio-button :label="1">是</el-radio-button>
                <el-radio-button :label="0">否</el-radio-button>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="土地性质">
            <el-input v-model="LandParcelInfo.landStatus" :disabled="true" placeholder="没有数据源"></el-input>
        </el-form-item>
        <landTypes :key="spotComputedID + '-' + LandParcelInfo.landType" :landPropsCode="LandParcelInfo.landType" label="土地现状" @on-success="landTypechange">土地现状
        </landTypes>
        <landProduct :key="timestamp" :landCode="LandParcelInfo.landProduct" label="农产品分类" @on-change="landProductchange">农产品分类
        </landProduct>
        <el-form-item label="品种">
            <el-input v-model="LandParcelInfo['landOtherType']"></el-input>
        </el-form-item>

         <el-form-item label="单价(元)">
            <el-input disabled v-model="LandParcelInfo['price']"></el-input>
        </el-form-item>
        <el-form-item class="unit" label="预计年产量">
            <el-input v-model="LandParcelInfo.landYearOutput" placeholder="请输入内容" style="width: 260px">
                <template slot="append">{{LandParcelInfo['unit']}}</template>
                <!-- <el-select
            slot="append"
            v-model="LandParcelInfo.landOutputUnit"
            placeholder="请选择"
            style="width: 110px"
            @focus="propertyValue"
          >
            <el-option
              v-for="item in landOutputUnit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
            </el-input>

        </el-form-item>
                <el-form-item label="预计年产值(元)">
            <el-input v-model="LandParcelInfo['landYearValue']"></el-input>
        </el-form-item>
        <el-divider content-position="left">图斑历年年产值</el-divider>
        <div v-if="LandYearData.length" class="transition-box">
            <el-table :data="LandYearData" border style="width: 95%; margin: 20px auto">
                <el-table-column label="时间" prop="auditDate">
                </el-table-column>
                <el-table-column label="年产量" prop="landYearOutput">
                </el-table-column>
                <el-table-column label="年产值（元）" prop="landYearValue">
                </el-table-column>
            </el-table>
        </div>
        <div v-else style="width: 95%; margin: 20px auto">
            <el-alert title="没有历年产值" type="info" show-icon :closable="false">
            </el-alert>
        </div>

        <transition name="el-fade-in-linear">
            <div v-show="subjectDataShow" class="transition-box">
                <el-divider content-position="left">图斑经济信息</el-divider>
                <el-table :key="spotComputedID + '-' + subjectData.contractId" :data="subjectData" border style="width: 95%; margin: 20px auto">
                    <el-table-column label="经营主体" prop="subjectName">
                    </el-table-column>
                    <el-table-column label="所属单位" prop="affiliatedUnit">
                    </el-table-column>
                    <el-table-column label="合同编号" prop="contractId">
                    </el-table-column>
                    <el-table-column label="占地面积（亩）" prop="lsSubjectUseArea">
                    </el-table-column>
                    <el-table-column label="年产值(万元)" prop="lsYearValue">
                    </el-table-column>
                    <el-table-column label="承包年限" prop="contractYear">
                    </el-table-column>
                    <el-table-column label="所属基地" prop="subjectBase">
                    </el-table-column>
                    <el-table-column label="基地地址" prop="landSubjectBaseAdd">
                    </el-table-column>
                    <el-table-column width="150">
                        <template slot="header">
                            <relevancy v-show="isShow" :key="spotComputedID" :landCodeT="spotComputedID" @on-success="getSubject" @click.native="getLandCodeT">添加记录
                            </relevancy>
                        </template>
                        <template slot-scope="scope">
                            <relevancy v-show="isShow" :key="spotComputedID" :landCodeT="spotComputedID" :landSubjectId="landSubjectId" :subjectTemp="fnSubjectTemp" style="float: left" @on-success="getSubject" @click.native="editSubject(scope.row)">编辑
                            </relevancy>
                            <el-button v-show="isShow" size="mini" style="float: left" type="danger" @click="deleteSubject(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </transition>

        <el-form-item class="editLand">
            <el-button v-show="isShow" type="primary" @click="editLand">提交以上采集信息</el-button>
        </el-form-item>
        <el-divider content-position="left">图斑审核信息</el-divider>
        <el-collapse v-model="activeNames" accordion style="width: 95%; margin: 20px auto" @change="handleChange">
            <el-collapse-item :title="collapseTitle" name="1">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="更新信息"> </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="审核信息">
                            <el-button v-if="
                    userInfo.userLevel < 5 && LandParcelInfo.auditStatus === 1
                  " v-show="isShow" size="medium" type="warning" @click="auditLand()">审核
                            </el-button>
                            <el-button v-if="false" :disabled="true" size="medium" type="danger">地块未采集或已经通过审核</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="更新时间">
                            <el-input v-model="LandParcelInfo.updateTime" :readonly="true" class="bordernone"></el-input>
                        </el-form-item>
                        <el-form-item label="更新人">
                            <el-input v-model="LandParcelInfo.updatePerson" :readonly="true" class="bordernone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="审核提交时间">
                            <el-input v-model="LandParcelInfo.auditDate" :readonly="true" class="bordernone"></el-input>
                        </el-form-item>
                        <el-form-item label="审核人">
                            <el-input v-model="LandParcelInfo.auditPerson" :readonly="true" class="bordernone"></el-input>
                        </el-form-item>
                        <el-form-item label="审核状态">
                            <el-input :readonly="true" :value="auditStatusCn(LandParcelInfo.auditStatus)" class="bordernone">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="审核意见">
                            <el-input v-model="LandParcelInfo.auditMemo" :readonly="true" class="bordernone" style="width: 260px" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-collapse-item>
        </el-collapse>
    </el-form>

    <el-dialog :append-to-body="true" :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="dialogStatus" title="图斑地块审核" width="30%">
        <el-form ref="modelData" :inline="false" :model="details" label-position="right" label-width="90px" size="normal" status-icon>
            <el-form-item label="审核状态" prop="name">
                <el-radio v-model="details.auditStatus" :label="2">通过</el-radio>
                <el-radio v-model="details.auditStatus" :label="3">不通过</el-radio>
            </el-form-item>
            <el-form-item label="审核描述" prop="name">
                <el-input v-model="details.auditMemo" type="textarea"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="onSubmit()">确 定</el-button>
        </span>
    </el-dialog>
    <span v-show="false">{{ taskObject }}</span>
</div>
</template>

<script>
import {
    mapState
} from "vuex";
import {
    convertKey
} from "@/library";

// import relevancy from "./relevancy/relevancy";

export default {
    props: {
        remoteSensingData: {
            type: Object,
            default: function () {
                return {
                    DKBH: "",
                };
            },
        },
        spotID: {
            type: String,
            required: true,
        },
        userInfo: {
            type: Object,
            required: true,
            default: function () {
                return {};
            },
        },
        currentTask: {
            type: Object,
            required: true,
            default: function () {
                return {
                    data: {},
                    value: {},
                };
            },
        },
        planId: {
            type: [String, Number, Array],
        },
        isShow: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            timestamp:+new Date(),
            LandYearData: [],
            random: "",
            landSubjectId: "",
            fnSubjectTemp: {},
            dialogStatus: false,
            villageCode: "",
            LongitudeAndLatitude: [],
            details: {
                updateTime: "",
                updatePerson: "",
                auditDate: "",
                auditPerson: "",
                auditMemo: "",
                auditStatus: 2,
                auditStatusName: "",
                landIds: "",
                landProductArea: "",
            },
            subjectDataShow: true,
            collapseTitle: "展开",
            activeNames: "1",
            landCodeT: [],
            subjectData: [],
            landOutputUnit: {},
            landUnit: "无",
            LandParcelInfo: {
                isPrivatePlot: 0,
                isLargeGreenhouse: 0,
                price:"",
                unit:"",
            },
            originNewlandProduct: [],
            successLandTypes: [],
            avatarUrl: require("@/assets/404.jpg"),
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            landProductObj:{}
        };
    },
    computed: {
        ...mapState({
            taskObject(state) {
                console.log(state.taskmodel.taskObject);
                return state.taskmodel.taskObject;
            },
            originlandProduct: "originlandProduct"
        }),

        // getTownId(id) {
        //   console.log(id);
        //   this.townId = id;
        //   this.LandParcelInfo.landTownCode = id
        //   // this.LandParcelInfo.landVillageCode = ""
        // },
        // getVillageId(id){
        //   console.log(id)
        //   this.VillageId = id
        //   this.LandParcelInfo.landVillageCode = id
        // },

        townId: {
            get() {
                return this.LandParcelInfo.landTownCode;
            },
            set(id) {
                this.LandParcelInfo.landTownCode = id;
            },
        },
        VillageId: {
            get() {
                return this.LandParcelInfo.landVillageCode;
            },
            set(id) {
                this.LandParcelInfo.landVillageCode = id;
            },
        },
        ossImgList() {
            if (
                this.LandParcelInfo.ossImgList != null &&
                this.LandParcelInfo.ossImgList != ""
            ) {
                return this.LandParcelInfo.ossImgList[
                    this.LandParcelInfo.ossImgList.length - 1
                ].imgUrl;
            } else {
                return this.avatarUrl;
            }
        },
        subjectSpotId: {
            get() {
                this.random = Math.random();
                return this.spotID;
            },
            set(id) {
                this.spotID = id;
            },
        },
        spotComputedID: {
            get() {
                // console.log("这是遥感数据", this.remoteSensingData);
                // console.log("任务ID", this.currentTask.data.id);
                // console.log('图斑ID', this.spotID);NHQ4834
                this.$common
                    .getLandYearValues({
                        "landInfo.landCode": this.spotID,
                        "collectTaskLand.auditStatus": 2,
                    })
                    .then((res) => {
                        if (res.errorCode === '00000') {
                            this.LandYearData = res.data.list;
                            console.log(res, "getLandYearValues");
                        }

                    });

                let params = {
                    "landInfo.landCode": this.spotID,
                    systemTypes: localStorage.getItem("SYS_TYPE"),
                };
                if (this.taskObject.pvCode === "P11101") {
                    // 任务ID存在执行任务模式
                    if (this.currentTask.data) {
                        if (this.planId) {
                            params["collectTaskLand.planId"] = this.planId;
                        } else if (this.currentTask.data.id) {
                            params["collectTaskLand.planId"] = this.currentTask.data.id;
                        }
                        this.GetCollectTaskLand(params);
                    } else {
                        this.$message({
                            message: "请先选择一个任务",
                            type: "warning",
                        });
                    }
                } else {
                    // 任务ID不存在执行数据查看模式
                    this.GetCollectTaskLandExamine(params);
                }
                //获取关联的主体
                this.subjectList();
                return this.spotID;
            },
            set(id) {
                this.spotID = id;
            },
        },
    },
    created() {
        if (this.userInfo.userLevel < 5) {
            this.handleChange("1");
        }
        this.recursion(this.originlandProduct)
    },
    watch: {
        "LandParcelInfo.isPrivatePlot": {
            handler(n) {
                if (n == 1) {
                    this.subjectDataShow = false;
                } else {
                    this.subjectDataShow = true;
                }
            },
            deep: true,
        },
        isShow(n) {
            this.isShow = n;
        },
        "LandParcelInfo.landYearOutput":{
            handler(n) {
                this.LandParcelInfo['landYearValue'] = parseFloat(n) * parseFloat(this.LandParcelInfo['price'])
            },
            deep: true
        },
        "LandParcelInfo.landProduct": {
            handler(n) {
                this.getUnit(n)
            },
            deep: true
        }
    },
    methods: {
        getLandNameAuto() {
            let params = {
                // landId: this.LandParcelInfo.id,
                town: this.LandParcelInfo.landTownName,
                village: this.LandParcelInfo.landVillageName,
                landType: this.LandParcelInfo.landTypeName,
            };
            this.$axios
                .post("/rbac/data/LandInfoRule/getLandNameAuto", {
                    params,
                })
                .then((res) => {
                    this.LandParcelInfo.landName = res.data;
                });
        },

        recursion(arr) {
            arr.forEach((item) => {
                if (item.children !== null && item.children.length) {
                    this.recursion(item.children)
                }
                this.originNewlandProduct.push(item)
            })
        },

        landTypechange(arr) {
            console.log(arr);
            this.successLandTypes = arr;
            //   this.LandParcelInfo.landType = arr[1];
        },
        landProductchange(id) {
            this.LandParcelInfo.landProduct = id;
            this.getUnit(id)
        },
        getUnit(id) {
            this.originNewlandProduct.forEach((item) => {
                if (item.productTypeCode == id) {
                    this.LandParcelInfo['price'] = item.price==null?0:item.price
                    this.LandParcelInfo['unit'] = item.unit==null?'空':item.unit
                    this.LandParcelInfo['landYearValue'] = parseFloat(this.LandParcelInfo['landYearOutput']) * parseFloat(this.LandParcelInfo['price'])
                }
            })
        },
        editSubject(row) {
            this.landSubjectId = row.landSubjectId;
            this.fnSubjectTemp = row;
        },
        getTaskLand() {
            let params = {
                "landInfo.landCode": this.spotID,
                systemTypes: localStorage.getItem("SYS_TYPE"),
                "collectTaskLand.planId": this.currentTask.data.id,
            };
            //显示任务地块信息
            this.$axios
                .get("/rbac/data/CollectTaskLand/list", {
                    params: params,
                })
                .then((res) => {
                    setTimeout(() => {
                        this.LandParcelInfo = res.data.list[0];
                    }, 300);
                });
        },
        subjectList() {
            this.$axios
                .get("rbac/data/LandSubject/get", {
                    params: {
                        "landSubject.lsLandCode": this.subjectSpotId,
                    },
                })
                .then((res) => {
                    this.subjectData = res.data.list;
                });
        },
        GetCollectTaskLand(params) {
            // 任务模式
            return this.$common.getCollectTaskLand(params).then((res) => {
                this.LandParcelInfo = res.data.list[0];
                // 获取遥感提供的经纬度
                setTimeout(() => {
                    this.LongitudeAndLatitude = [
                        this.remoteSensingData.X,
                        this.remoteSensingData.Y,
                    ];
                    //this.LandParcelInfo.XY = [this.remoteSensingData.X, this.remoteSensingData.Y]
                }, 100);
            });
        },
        GetCollectTaskLandExamine(params) {
            // 查看模式调用地块数据
            let paras = {
                "landInfo.landCode": this.spotID,
                //   systemTypes: localStorage.getItem("SYS_TYPE"),
            };
            this.$axios
                .get("rbac/data/LandInfo/getList", {
                    params: paras,
                })
                .then((res) => {
                    setTimeout(() => {
                        this.LandParcelInfo = res.data.list[0];
                        this.LandParcelInfo.landProductArea = this.LandParcelInfo.mu;
                        // 获取遥感提供的经纬度
                        this.LongitudeAndLatitude = [
                            this.remoteSensingData.X,
                            this.remoteSensingData.Y,
                        ];
                        this.LandParcelInfo.landProductArea = res.data.list[0].mu;
                    }, 300);
                });
        },
        handleChange(e) {
            this.activeNames = e;
            if (e) {
                this.collapseTitle = "收起";
            } else {
                this.collapseTitle = "展开";
            }
        },
        getSubject(arr) {
            //更新主体列表
            console.log(arr);
            console.log(111);
            this.subjectList();
        },
        getLandCodeT(row) {
            this.fnSubjectTemp = row;
            this.landSubjectId = row.landSubjectId;
        },
        editShow(row) {
            getLandCodeT();
            this.form = row;
            this.editSubjectShow = true;
        },
        deleteSubject(row) {
            console.log(row.landSubjectId);

            this.$confirm("是否删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    let params = {
                        id: row.landSubjectId,
                    };
                    this.$axios
                        .post("/rbac/data/LandSubject/delete", {
                            params: params,
                        })
                        .then((res) => {
                            this.subjectList();
                        });
                })
                .catch(() => {});
        },
        editLand() {
            //修改任务地块信息
            console.log(this.LandParcelInfo);
            delete this.LandParcelInfo.landSubjectRs;
            delete this.LandParcelInfo.landIds;
            delete this.LandParcelInfo.landSubjects;
            delete this.LandParcelInfo.ossImgList;
            // alert(this.currentTask.data.id)
            this.LandParcelInfo.landPlanId = this.currentTask.data.id;
            if (this.LandParcelInfo.isLargeGreenhouse) {
                this.LandParcelInfo.isLargeGreenhouse = 1;
            } else {
                this.LandParcelInfo.isLargeGreenhouse = 0;
            }

            // this.successLandTypes = arr;
            this.LandParcelInfo.landType =
                this.successLandTypes[this.successLandTypes.length - 1];

            this.$axios
                .post("/rbac/data/LandInfo/taskLandUpdate", {
                    params: this.LandParcelInfo,
                })
                .then((res) => {
                    if (res.errorCode === "00000") {
                        this.$message.success("采集信息已提交,等待审核");
                        this.$emit("reload");
                        this.$emit("landCancelVisiable", false);
                        if (this.LandParcelInfo.isLargeGreenhouse) {
                            this.LandParcelInfo.isLargeGreenhouse = true;
                        } else {
                            this.LandParcelInfo.isLargeGreenhouse = false;
                        }
                    } else {
                        this.$message.error(res.errorMsg);
                    }
                    this.getTaskLand();
                    this.$emit("on-collect", true);
                    this.LandParcelInfoVisible = false;
                    // this.$emit("on-location", this.LandParcelInfo.XY);
                });
        },
        propertyValue() {
            this.$axios
                .get("/baseinfo/baseInfo/propertyValue/select", {
                    params: {
                        ptCode: "P01",
                    },
                })
                .then((res) => {
                    this.landOutputUnit = convertKey(res.data, {
                        pvCode: "value",
                        propertyValue: "label",
                    });
                });
        },
        getTownId(id) {
            console.log(id);
            this.townId = id;
            // this.LandParcelInfo.landTownCode = id
            // this.LandParcelInfo.landVillageCode = ""
        },
        getVillageId(id) {
            console.log(id);
            this.VillageId = id;
            // this.LandParcelInfo.landVillageCode = id
        },
        auditStatusCn(index) {
            let Status = {
                0: "初始状态",
                1: "待审核",
                2: "审核通过",
                3: "审核失败",
            };
            return Status[index];
        },
        location(xy) {
            this.$alert("此操作会关闭当前界面回到地图界面", "图斑定位", {
                showCancelButton: true,
            }).then((e) => {
                this.$emit("on-location", xy);
            });
        },
        getImgUrl(arr) {
            console.log(arr);
            this.LandParcelInfo.imgUrl = arr.join(",");
            console.log(this.LandParcelInfo.imgUrl);
        },
        onSubmit() {
            this.dialogStatus = false;
            console.log("submit!");
            this.$confirm("是否确认操作?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    //发送审核请求
                    this.$axios
                        .post("rbac/LandSubject/auditLand", {
                            params: {
                                landIds: this.LandParcelInfo.id,
                                auditStatus: this.details.auditStatus,
                                auditMemo: this.details.auditMemo,
                            },
                        })
                        .then((result) => {
                            this.$message.success("操作完成");
                            this.getTaskLand();
                            this.$emit("on-collect", true);
                        });
                })
                .catch(() => {});
        },
        auditLand() {
            this.dialogStatus = true;
        },
    },
};
</script>

<style lang="scss">
.Avatar {
    width: 220px;
    height: 220px;
}

.bordernone {}

.textarea .el-form-item__content {
    width: 670px;
    height: 130px;

    .el-textarea__inner {
        height: 130px;
        resize: none;
        font-size: 18px;
    }

    .el-textarea__inner::placeholder {
        font-size: 30px;
        font-size: 18px;
        text-align: center;
        line-height: 100px;
    }
}

.acquisition-interface {
    .el-form-item:not(.unit) {

        .el-radio-group,
        .el-input,
        .el-select {
            width: 260px;
        }
    }

    .editLand {
        display: flex;
        justify-content: center;
    }
}

.transition-box {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
}
</style>
